<script setup lang='ts'>
const { title, color, text } = defineProps<{ title: string, color: string, text: string }>()
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref } from 'vue';
const data = ref<[]|null>()
const open = () => {
  ElMessageBox.confirm(
    '您确定购买此账号吗？',
    '通知',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '购买成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消购买',
      })
    })
}
</script>

<template>
    <div class="i"></div>
    <div class="content">
        <div class="title" :style="{ backgroundColor: color }">
            <div class="icon">
                <slot></slot>
            </div>
            <h3>{{ title }}</h3>
            <p class="text">{{ text }}</p>
        </div>
        <div class="data">
          <el-empty  style="width: 1170px;" v-if="data === null" description="没数据" />
            <div v-if="data !== null" class="select" v-for="i in 8" @click="open">
                <div class="thisbackground">
                    1111111111111111
                </div>
                <p class="text2">
                    多年域名，百度收录正常，另有其它多个域名出售。111111111111111111111
                </p>
                <div class="moneyData">
                    <p class="money">￥6000</p>
                    <div class="imgData">
                        <img src="../../../public/vite.svg" alt="">
                        <p>11111</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
@import url(../../assets/style/facebookContent.css);
</style>